<!--
@Author: 左盐
@Date:   2018-03-05 16:18:21
@Email:  huabinglan@163.com
@Last modified by:   左盐
@Last modified time: 2018-03-31 10:10:13
-->



<style lang="less">
.title {
    height: 30px;
    line-height: 30px;
    margin-top: 30px;
    margin-bottom: 10px;
}
</style>
<template>
<div id="app" style="width:100%;margin:100px auto;background-color: #449d44;height: 6000px;">
  <h2 class="title">alert</h2>
  <el-button type="primary" @click="submitHandle">提交</el-button>
  <h2 class="title">confirm</h2>
  <el-button type="primary" @click="confirmHandle">删除</el-button>
  <h2 class="title">msg</h2>
  <el-button type="primary" @click="msgHandle">msg</el-button>
  <el-button type="primary" @click="msg1Handle">带回调</el-button>
  <h2 class="title">loading</h2>
  <el-button type="primary" @click="loadingHandle">默认样式</el-button>
  <h2 class="title">tips</h2>
  <el-button type="primary" id="tips" @click="tipsHandle">上</el-button>
  <el-button type="primary" id="tips1" @mouseenter.native="tips1Handle">右</el-button>
  <el-button type="primary" id="tips2" @click="tips2Handle">下</el-button>
  <el-button type="primary" id="tips3" @click="tips3Handle">左-自定义样式</el-button>
  <h2 class="title">page</h2>
  <el-button type="primary" id="tips" @click="pageHandle('student','学员管理')">学员管理</el-button>
  <el-button type="primary" id="tips" @click="pageHandle('user','员工管理')">员工管理</el-button>
  <div class="vl-notify-task" ></div>
</div>
</template>

<script>
import tools from './js/tools.js';
import formComp from './form.vue';

export default {
  data() {
    return {}
  },
  components: {
    'base-form': formComp,
  },
  // async mounted() {
  //   let ids = [];
  //   for (let i = 0; i < 5; i++) {
  //     await tools.sleep(10);
  //     let id = this.loadingHandle();
  //     ids.push(id);
  //   }
  //   for (let i = 0; i < 5; i++) {
  //     await tools.sleep(200);
  //     this.$layer.close(ids[i]);
  //   }
  //   this.$on('asd', function(val) {
  //     this.$layer.msg(val);
  //   });
  // },
  methods: {
    submitHandle: function() {
      let id = this.$layer.alert(
        "this is demo!!!<br/>this is demo!!!<br/>this is demo!!!<br/>this is demo!!!<br/>this is demo!!!<br/>this is demo!!!<br/>this is demo!!!<br/>this is demo!!!this is demo!!!this is demo!!!this is demo!!!this is demo!!!this is demo!!!this is demo!!!this is demo!!!this is demo!!!", {
          shade: true
        },
        () => {
          alert(1);
          this.$layer.close(id);
        });
    },
    confirmHandle: function() {
      let id = this.$layer.confirm("确定要<br/>删除吗？", () => {
        this.$layer.msg("执行了删除");
        // this.$layer.close(id);
      });
    },
    msgHandle: function() {
      let id = this.$layer.msg("弱弱的提示");
    },
    msg1Handle: function() {
      let id = this.$layer.msg("5s后刷新页面", {
        time: 5
      }, () => {
        this.$layer.close(id);
      });
    },
    loadingHandle: function() {
      let id = this.$layer.loading({
        time: 500
      });
      return id;
    },
    tipsHandle: function() {
      let id = this.$layer.tips("在很久很久以前", '#tips', {
        tips: 0,
        time: 100
      });
    },
    tips1Handle: function() {
      let id = this.$layer.tips("在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，", '#tips1', {
        tips: 1,
        time: 100
      });
    },
    tips2Handle: function() {
      let id = this.$layer.tips("在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，", '#tips2', {
        tips: 2
      });
    },
    tips3Handle: function() {
      let id = this.$layer.tips("在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，在很久很久以前，", '#tips3', {
        tips: [3, {
          "selfa": true
        }],
        time: 10
      });
    },
    pageHandle( id,title){
       this.$layer.open({
            type: 2,
            id: id, // title
            title: title, // title
            maxmin: true,
            area: ['1024px', '600px'], // 宽 高
            shadeClose: false, // 点击遮罩关闭
            tabIcon: '', // 点击遮罩关闭
            shade: false, // 遮罩 默认不显示
            content: {
                content: formComp,
                parent: this, // 当前的vue对象
                data: {
                    check: 'aaaaaaaaxxxx'
                } // props
            }
        })
    }
  }
}
</script>
<style lang="css">
  .vl-notify-task {
    background-image: url("");
    width: 100%;
    height: 45px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 66666666666;
  }
</style>